<template>
  <div class="full-out-heart" :class="{ on }" @transitionend="onEnd">
    <Icon class="heart heart1" size="104" shadow name="heartActive"></Icon>
    <Icon class="heart heart2" size="104" shadow name="heartActive"></Icon>
    <Icon class="heart heart3" size="104" shadow name="heartActive"></Icon>
    <Icon class="heart heart4" size="104" shadow name="heartActive"></Icon>
    <Icon class="heart heart5" size="104" shadow name="heartActive"></Icon>
    <Icon class="heart heart6" size="104" shadow name="heartActive"></Icon>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'

const emits = defineEmits(['end'])

const on = ref(false)
onMounted(() => {
  requestAnimationFrame(() => (on.value = !on.value))
})
function onEnd() {
  setTimeout(() => emits('end'), 300)
}
</script>

<style lang="scss" scoped>
.full-out-heart {
  width: 100%;
  height: 100%;
  position: absolute;

  .heart {
    position: absolute;
    left: calc(50% - 3.25rem);
    top: calc(50% - 3.25rem);
    transform-origin: center;
    &.heart1 {
      transition: transform 0.8s 0.5s, opacity 0.8s 0.5s;
    }
    &.heart2 {
      transition: transform 0.8s 0.4s, opacity 0.8s 0.4s;
    }
    &.heart3 {
      transition: transform 0.8s 0.3s, opacity 0.8s 0.3s;
    }
    &.heart4 {
      transition: transform 0.8s 0.2s, opacity 0.8s 0.2s;
    }
    &.heart5 {
      transition: transform 0.8s 0.1s, opacity 0.8s 0.1s;
    }
    &.heart6 {
      transition: transform 0.8s, opacity 0.8s;
    }
  }

  &.on .heart1 {
    transform: translate(3.575rem, -5.525rem) scale(1.875);
    opacity: 0;
  }
  &.on .heart2 {
    transform: translate(-2.73rem, -10.075rem) scale(1.875);
    opacity: 0;
  }
  &.on .heart3 {
    transform: translate(-1.3rem, -16.25rem) scale(1.5);
    opacity: 0;
  }
  &.on .heart4 {
    transform: translate(2.275rem, -20.475rem) scale(1.25);
    opacity: 0;
  }
  &.on .heart5 {
    transform: translate(10.725rem, -24.375rem);
    opacity: 0;
  }
  &.on .heart6 {
    transform: translate(-10.075rem, -22.75rem);
    opacity: 0;
  }
}
</style>
